{% extends "layout.html" %}
{% block body %}
<link rel="stylesheet" href="/static/house/css/user.css">

<header class="masthead no-margin-bottom" style="background-color: #fff; min-height: 500px">
    <div class="overlay"></div>
    <div class="container">
        <div class="row ">
            <div class="col-lg-8 col-md-8 mx-auto detail-body">
                <ul class="nav nav-tabs" style="margin:10px 0 30px">
                    <li class="active chanle1"><a href="#userinfo">基本资料</a></li>
                    <li class="chanle2"><a href="#collections">房源收藏</a></li>
                </ul>
                <!-- 个人信息 -->
                <form method="post" id="userdetail">
                    <div class="user-info">
                        <div class="row">
                            <div class="col-lg-12 c-1">
                                <span>昵称：</span>
                                <input type="text" name="name" value="{{user.name}}">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 c-1">
                                <span>住址：</span>
                                <input type="text" name="addr" value="{{user.addr if user.addr else ""}}"
                                    placeholder="请输入住址">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 c-1">
                                <span>密码：</span>
                                <input type="password" name="password" placeholder="请输入密码">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 c-1">
                                <span>邮箱：</span>
                                <input type="text" name="email" value="{{user.email}}">
                            </div>
                        </div>
                        <div class="row btnuser">
                            <button class="btn btn-primary">提交</button>
                        </div>
                    </div>
                </form>
                <!--收藏列表-->
                <div class="collection">
                    <div class="row collection-line" id="collect">
                        <span class="collect_off" id="">取消收藏</span>
                        <div class="col-lg-4 col-md-4 mx-auto">
                            <div>
                                <a href="/house">
                                    <img class='img-fluid img-box' src="/static/img/house-bg1.jpg" alt="">
                                </a>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 mx-auto">
                            <div class="collection-line-info">
                                <div>
                                    <span class="attribute-text">房源地址：</span>
                                    &nbsp
                                    <span class="info-text">5555</span>
                                </div>
                                <div>
                                    <span class="attribute-text">建筑面积：</span>
                                    &nbsp
                                    <span class="info-text">6666平方米</span>
                                </div>
                                <div>
                                    <span class="attribute-text">房源户型：</span>
                                    &nbsp
                                    <span class="info-text">7777</span>
                                </div>
                                <div>
                                    <span class="attribute-text">房源朝向：</span>
                                    &nbsp
                                    <span class="info-text">8888</span>
                                </div>
                                <div>
                                    <span class="attribute-text">房源价格：</span>
                                    &nbsp
                                    <span class="info-text" style="color: #e74c3c">￥&nbsp7777</span>
                                </div>

                            </div>
                        </div>
                        <div class="col-lg-2 col-md-2 mx-auto" style="height: 100px; margin-top: 40px;">
                            <div class="info-more"
                                style="width: 100%; height: 100%; position: relative; overflow: hidden;">
                                <span><a href="/house"
                                        style="position: absolute; top:-30px; left: -1px; height: 20px;"><i
                                            class="fa fa-arrow-right" aria-hidden="true"></i></a></span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <!--浏览记录-->
            <div class="col-lg-4 col-md-4 mx-auto detail-body">
                <div class="row browse-record">
                    <div class="col-lg-10 col-md-10 mx-auto">
                        <h3 style="margin:20px 0 15px">浏览记录</h3>
                    </div>
                    <div class="col-lg-10 col-md-10 mx-auto del-btn">
                        <span id="del">清空浏览记录</span>
                    </div>
                    <div style="overflow: scroll; height:680px;">
                        {% for item in seen_house_list %}
                        <div class="col-lg-10 col-md-10 mx-auto browse-record-first-div">
                            <div class="course">
                                <div><a href="/house/{{item.id}}"><img class='img-fluid img-box'
                                            src="/static/img/house-bg1.jpg" alt=""></a>
                                </div>
                                <div class="course-info">
                                    <span class="glyphicon glyphicon-map-marker"></span>
                                    <span>{{item.address}}</span>
                                </div>
                                <div class="course-info1">
                                    <span>{{item.rooms}}-{{item.area}}平方米</span>
                                    <span class="price">￥&nbsp{{item.price}}</span>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>

</header>
<script>
    $(".nav-tabs li").click(function () {
        let status = $(this).hasClass("chanle1")
        if (status) {
            $(".user-info").show();
            $(".collection").hide()
            $(".chanle1").addClass("active")
        }
        else {
            $(".user-info").hide();
            $(".collection").show()
        }
        $(this).addClass("active").siblings().removeClass("active")
    })

    // 表单校验
    $("#userdetail").bootstrapValidator({
        fields: {
            name: {
                validators: {
                    notEmpty: {
                        message: '用户名不能为空!'
                    },
                    stringLength: {
                        min: 6,
                        max: 15,
                        message: '用户名长度必须在6到15位之间'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: '用户名只能包含大写、小写、数字和下画线'
                    },
                    different: {
                        field: 'password',
                        message: '用户名不能与密码相同'
                    }
                }
            },
            password: {
                validators: {
                    different: {
                        field: 'username',
                        message: '密码不能与用户名相同'
                    },
                    stringLength: {
                        min: 4,
                        max: 15,
                        message: '密码长度必须在4到15位之间'
                    },
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: '邮箱不能为空!'
                    },
                    emailAddress: {
                        message: '无效的邮箱地址'
                    }
                }
            },
        }
    })

    // 修改个人资料
    $("form").on('submit', function (e) {
        e.preventDefault();
        let formdata = $("#userdetail").serializeArray()
        let data = {}
        $.each(formdata, function (i, item) {
            if (item.value) {
                data[item.name] = item.value
            }
        });
        let validator = $('#userdetail').data("bootstrapValidator"); //获取validator对象
        validator.validate(); //手动触发验证
        if (validator.isValid()) {
            $.ajax({
                type: 'post',
                url: '/profile',
                data: data,
                dataType: 'json',
                success: function (res) {
                    if (res.code == 1) {
                        alert(res.msg);
                        location.href = "/user/" + res.data
                    }
                    else {
                        alert(res.msg);
                        location.href = '/';
                    }
                }
            })
        }
    })

    // 清空浏览记录
    $("#del").click(function () {
        let res = confirm('确认是否清空浏览记录')
        if (res) {
            $.ajax({
                type: 'post',
                url: '/delseenlist',
                dataType: 'json',
                success: function (res) {
                    alert(res.msg);
                    if (res.code == 1) {
                        location.href = "/user/" + res.data
                    }else
                    {
                        location.href = '/';
                    }
                }
            })
        }
    })
</script>
{% endblock %}